// 消费者创建/编辑组件
const ConsumersCreate = {
    template: `
        <div class="form-container">
            <div class="form-header">
                <h2 class="form-title">{{ isEdit ? '编辑消费者' : '创建消费者' }}</h2>
            </div>
            
            <el-form ref="form" :model="form" :rules="rules" label-width="120px" v-loading="loading">
                <el-form-item label="应用ID" prop="appId" :disabled="isEdit">
                    <el-input v-model="form.appId" :disabled="isEdit"></el-input>
                    <div class="form-item-tip" v-if="!isEdit">应用ID必须唯一，创建后不可修改</div>
                </el-form-item>
                
                <el-form-item label="应用名称" prop="appName">
                    <el-input v-model="form.appName"></el-input>
                </el-form-item>
                
                <el-form-item label="应用密钥" prop="appSecret">
                    <el-input v-model="form.appSecret" :disabled="isEdit">
                        <el-button slot="append" @click="generateSecret" :disabled="isEdit">生成</el-button>
                    </el-input>
                    <div class="form-item-tip" v-if="isEdit">出于安全考虑，应用密钥创建后不可修改</div>
                </el-form-item>
                
                <el-form-item label="描述" prop="description">
                    <el-input type="textarea" v-model="form.description" rows="4"></el-input>
                </el-form-item>
                
                <div class="form-footer">
                    <el-button @click="goBack">取消</el-button>
                    <el-button type="primary" @click="submitForm">{{ isEdit ? '保存' : '创建' }}</el-button>
                </div>
            </el-form>
        </div>
    `,
    props: {
        id: {
            type: [String, Number],
            required: false
        }
    },
    data() {
        return {
            form: {
                appId: '',
                appName: '',
                appSecret: '',
                description: ''
            },
            rules: {
                appId: [
                    { required: true, message: '请输入应用ID', trigger: 'blur' },
                    { min: 3, max: 50, message: '长度在 3 到 50 个字符', trigger: 'blur' }
                ],
                appName: [
                    { required: true, message: '请输入应用名称', trigger: 'blur' },
                    { min: 2, max: 100, message: '长度在 2 到 100 个字符', trigger: 'blur' }
                ],
                appSecret: [
                    { required: true, message: '请输入应用密钥', trigger: 'blur' },
                    { min: 6, max: 64, message: '长度在 6 到 64 个字符', trigger: 'blur' }
                ]
            },
            loading: false
        };
    },
    computed: {
        isEdit() {
            return !!this.id;
        }
    },
    created() {
        if (this.isEdit) {
            this.fetchConsumer();
        }
    },
    methods: {
        fetchConsumer() {
            this.loading = true;
            axios.get(`/consumers/${this.id}`)
                .then(response => {
                    const consumer = response.data;
                    this.form.appId = consumer.appId;
                    this.form.appName = consumer.appName;
                    this.form.appSecret = consumer.appSecret;
                    this.form.description = consumer.description;
                })
                .catch(error => {
                    console.error('获取消费者信息失败:', error);
                    this.$message.error('获取消费者信息失败');
                    this.goBack();
                })
                .finally(() => {
                    this.loading = false;
                });
        },
        generateSecret() {
            // 生成一个随机的应用密钥
            const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
            let secret = '';
            for (let i = 0; i < 32; i++) {
                secret += chars.charAt(Math.floor(Math.random() * chars.length));
            }
            this.form.appSecret = secret;
        },
        submitForm() {
            this.$refs.form.validate(valid => {
                if (valid) {
                    this.loading = true;
                    
                    if (this.isEdit) {
                        this.updateConsumer();
                    } else {
                        this.createConsumer();
                    }
                }
            });
        },
        createConsumer() {
            axios.post('/consumers', this.form)
                .then(response => {
                    this.$message({
                        message: '创建成功！',
                        type: 'success'
                    });
                    this.$router.push('/consumers/list');
                })
                .catch(error => {
                    console.error('创建消费者失败:', error);
                })
                .finally(() => {
                    this.loading = false;
                });
        },
        updateConsumer() {
            axios.put(`/consumers/${this.id}`, this.form)
                .then(response => {
                    this.$message({
                        message: '更新成功！',
                        type: 'success'
                    });
                    this.$router.push('/consumers/list');
                })
                .catch(error => {
                    console.error('更新消费者失败:', error);
                })
                .finally(() => {
                    this.loading = false;
                });
        },
        goBack() {
            this.$router.push('/consumers/list');
        }
    }
}; 